<!-- -->
<template>
  <div class="city">
    <scroll
      ref="scroll"
      class="scroll-content"
    >
      <div>
        <div class="header">
          <router-link
            tag="div"
            to="/"
            class="back"
          >
            <span class="iconfont icon-left"></span>
          </router-link>
          <div class="title">会议城市</div>
        </div>
        <div class="content">
          <div class="title">定位城市</div>
          <div
            class="notify"
            v-show="false"
          >当前城市定位失败，请手动选择</div>
          <div class="button-list">
            <div class="button-wrapper">
              <div class="button">
                深圳
              </div>
            </div>
          </div>
          <div class="title">已开通全部城市</div>
          <div class="button-list">
            <div
              class="button-wrapper"
              v-for="item of 19"
              :key="item"
            >
              <div class="button">
                北京
              </div>
            </div>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import scroll from 'base/scroll/scroll'
import loading from 'base/loading/loading'
export default {
  components: {
    scroll,
    loading
  }
}
</script>
<style lang='stylus' scoped>
@import '~common/stylus/variable';
.city {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: $color-background;
  .scroll-content {
    height: 100%;
    overflow: hidden;
    .header {
      display: flex;
      .back {
        float: left;
        span {
          font-weight: bold;
          line-height: $tools-height;
          font-size: $font-size-large;
        }
      }
      .title {
        flex: 1;
        font-size: $font-size-large;
        text-align: center;
        line-height: $tools-height;
      }
    }
    .content {
      .title {
        background-color: #ccc;
        padding: 10px 10px;
      }
      .notify {
        color: $color-text-gray;
        text-align: center;
        line-height: $tools-height;
      }
      .button-list {
        overflow: hidden;
        padding: 0.1rem 0.6rem 0.1rem 0.1rem;
        .button-wrapper {
          float: left;
          width: 33.33%;
          .button {
            margin: 0.1rem;
            padding: 0.8rem 0;
            text-align: center;
            font-size: $font-size-large;
            border: 0.02rem solid #ccc;
            border-radius: 0.06rem;
          }
        }
      }
    }
  }
}
</style>
